import React,{useRef,useState,createRef} from 'react';

// useRef
// 作用: 用来获取子组件的实例对象或普通标签节点的

// useRef和 createRef 区别
// 用法上看不出区别,语法都一样,都是用来创建 ref引用对象的,
// 不同点在于 : useRef() 初始化创建完 ref引用对象后,当页面数据更新时,不用重复创建ref引用对象, 
// createRef  初始化 创建 ref对象,数据更新后,也用创建
import Child from './Child'
const Father = () => {
   let [num1,setNum1] =useState(0)


    //  创建ref 引用对象
    const ref1 = createRef()
    const ref2 = createRef()
    const getRef=()=>{
        // console.log(ref1.current.innerHTML);
        console.log(ref2.current);
        //将子组件的数据显示在父组件中
        setNum1(ref2.current.num)

    }

    const editNum = ()=>{
            ref2.current.addNum()
    }
    return (
        <div>
            <p ref={ref1}>我是父组件--{num1}</p>
            <p><button onClick={editNum}>修改num</button></p>
            <hr/>
            {/* 使用子组件 */}
            <Child ref={ref2}></Child>
            <p><button onClick={getRef}>获取ref</button></p>
        </div>
    );
    
}

export default Father;
